import Tip from './Tip.vue'

import VueConfig, { preffix } from '__CONFIG__/vue-config.js'

//函数构造器
function noticeCreater(type) {
  return function ({title, desc, duration, align}) { 
    const { TipVue, tipsBoxDiv } = this
    const tip = new TipVue({
      data: { title, desc, duration, align, type }
    })
    tipsBoxDiv.append(tip.$mount().$el)
    //开启动画
    tip.canShow = true
   }
}

const success = noticeCreater('success')
const error = noticeCreater('error')
const state = noticeCreater('state')

const Tips = {
  install(Vue, options) {
    //创建容器, 将其挂载到本对象上
    const TipsBoxDiv = document.createElement('div');
    TipsBoxDiv.id = 'notice';
    TipsBoxDiv.className = 'notice';
    TipsBoxDiv.style.cssText = ``;
    //不知道为什么无法直接到this.TipsBoxDiv.id = '''之类
    Vue.tipsBoxDiv = TipsBoxDiv;
    //先挂载到DOM,提供的容器
    document.body.append(Vue.tipsBoxDiv, document.getElementById('app'))
    //将Tip类挂载到该对象上
    Vue.TipVue = Vue.extend(Object.assign(Tip, options));

    //开始挂载方法
    Vue.prototype.$Notice = {
      success: success.bind(Vue),
      error: error.bind(Vue),
      state: state.bind(Vue),
    }
    //更新全局配置
    VueConfig[preffix+'CALLBOARD'] =  {
      name: '$Notice',
      type: 'plugin'
    }
  }
}

//被导出后
export default Tips;